<template>
    <BasePanel width="232px" height="100%" :title="`预警管控（${year}年）`">
        <template #default>
            <div class="panel-content">
                <img class="img" :src="img" alt="" />
                <div
                    :class="{ 'base-data-checked': globalStore.currentPopName === 'TestPop2' }"
                    @click="onClickPanel"
                    style="cursor: pointer"
                    class="value-box"
                >
                    <span class="label">今日预警数</span>
                    <span class="value" style="color: rgba(247, 186, 32, 1)">
                        {{ panelData.today }}
                    </span>
                </div>
                <div class="value-box">
                    <span class="label">已处理</span>
                    <span class="value" style="color: rgba(1, 254, 133, 1)">
                        {{ panelData.done }}
                    </span>
                </div>
                <div class="value-box-2">
                    <span class="label">年累计</span>
                    <div class="value">
                        <span style="color: rgba(1, 254, 133, 1)">{{ panelData.yearDone }}</span>
                        <span>/</span>
                        <span>{{ panelData.yearTotal }}</span>
                    </div>
                </div>
            </div>
        </template>
    </BasePanel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel/index.vue'
import { useGlobalStore } from '@/store/global'
import dayjs from 'dayjs'
import { getFpiAssetsFile } from '@/utils/tools'

// 全局数据
const globalStore = useGlobalStore()

// 点击数据
const onClickPanel = () => {
    globalStore.togglePopInfo({
        popName: 'TestPop2',
        popData: null,
    })
}

// 年份
const year = ref(dayjs().year())

// 图片
const img = getFpiAssetsFile('global/warning.png')

// 面板数据
const panelData = reactive({
    today: 51,
    done: 34,
    yearTotal: 37857,
    yearDone: 37793,
})
</script>

<style lang="scss" scoped>
.panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;

    .img {
        position: absolute;
        width: 80px;
        height: 72px;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .value-box {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .label {
            font-size: 20px;
            font-weight: 700;
            height: 20px;
            line-height: 20px;
            color: rgba(255, 255, 255, 1);
        }

        .value {
            font-size: 24px;
            line-height: 24px;
            height: 24px;
            font-family: Oswald;
            font-weight: 400;
        }
    }

    .value-box-2 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .label {
            font-size: 20px;
            font-weight: 700;
            height: 20px;
            line-height: 20px;
            color: rgba(255, 255, 255, 1);
        }

        .value {
            font-family: Oswald;
            font-size: 24px;
            line-height: 24px;
            height: 24px;
            display: flex;
            gap: 2px;
            font-weight: 400;
        }
    }
}
</style>
